.yakit-hint-wrapper {
    z-index: 1001;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .yakit-hint-body {
        width: 100%;
        height: 100%;
        position: relative;
    }
}
.yakit-hint-hidden-wrapper {
    display: none;
}
.yakit-hint-mask-wrapper {
    background: rgba(49, 52, 63, 0.3);
}

.yakit-hint-modal-top {
    z-index: 999 !important;
}
.yakit-hint-modal-resize {
    overflow: hidden;
}
.yakit-hint-modal-hidden {
    display: none;
}
.yakit-hint-modal-wrapper {
    z-index: 99;
    width: 100%;
    position: absolute;
    top: 35vh;
    left: 0;
    right: 0;
    margin: auto;
}
.yakit-hint-modal-resize-wrapper {
    position: absolute;
    top: 35vh;
    left: calc(50% - 200px);
}
.yakit-hint-modal-container-box-shadow {
    box-shadow: 0px 6px 20px var(--Colors-Use-Basic-Shadow);
}
.container-wrapper-padding {
    padding: 24px;
}
.yakit-hint-modal-container {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--Colors-Use-Neutral-Bg-Hover);
    background: var(--Colors-Use-Neutral-Bg);
    box-shadow: 0px 8px 16px 0px var(--Colors-Use-Basic-Shadow);
    border-radius: 4px;

    .container-wrapper {
        width: 100%;
        display: flex;
        gap: 14px;
        position: relative;

        .container-draggle {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 24px;
            cursor: pointer;
        }

        .container-left-wrapper {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .left-hint-icon {
                width: 32px;
                height: 32px;
                svg {
                    width: 32px;
                    height: 32px;
                }
            }
            // .left-hint-icon-extra {
            // }
        }

        .container-right-wrapper {
            flex: 1;
            overflow: hidden;

            .right-title {
                padding-left: 2px;
                height: 24px;
                font-weight: 600;
                font-size: 16px;
                line-height: 24px;
                color: var(--Colors-Use-Neutral-Text-1-Title);

                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
            }

            .right-content {
                margin-top: 8px;
                padding-left: 2px;

                .default-content {
                    font-size: 14px;
                    line-height: 20px;
                    color: var(--Colors-Use-Neutral-Text-3-Secondary);
                }
            }

            .right-btn {
                margin-top: 24px;
                display: flex;
                justify-content: space-between;
                padding-left: 2px;
                // .btn-extra {
                // }

                .btn-group-wrapper {
                    display: flex;
                    gap: 8px;
                }
            }
        }
    }
    .container-wrapper-resize {
        height: 100%;
    }
}
.yakit-hint-modal-container-resize {
    height: 100%;
}
